// 设备表单组件 (deviceForm.vue)
<script>
    export default {
        props:['modelValue'],// 接收父组件传递的数据
        emits:['update:modelValue','device-save'],// 定义事件
        computed:{
            device:{
                get(){
                    return this.modelValue
                },
                set(value){
                    this.$emit('update:modelValue',value)
                }
            }
        }
    }
</script>

<template>
    <div class="device-form">
        <div>
            <label for="title">仪器名称</label>
            <input type="text" id="title" v-model="device.title"/>
        </div>
        <div>
            <label for="pic">封面</label>
            <input type="text" id="title" v-model="device.imageurl"/>
        </div>
        <div>
            <label for="author">品牌</label>
            <input type="text" id="author" v-model="device.brand" />
        </div>
        <div>
            <label for="publisher">型号</label>
            <input type="text" id="publisher" v-model="device.spcialtype" />
        </div>
        <div>
            <label for="devicecate">设备产地</label>
            <input type="text" id="devicecate" v-model="device.identify" />
        </div>
        <div>
            <label for="producer">启用日期</label>
            <input type="text" id="producer" v-model="device.status" />
        </div>
        <div>
            <label for="subtitle">学科领域</label>
            <input type="text" id="subtitle" v-model="device.description" />
        </div>
        <div>
            <label for="orinal-title">所属分类</label>
            <input type="text" id="original-title" v-model="device.category" />
        </div>
        <div>
            <label for="translator">电子邮箱</label>
            <input type="text" id="translator" v-model="device.email" />
        </div>
        <div>
            <label for="pubdate">主要功能</label>
            <input type="text" id="pubdate" v-model="device.mainFunctions" />
        </div>
        <div>
            <label for="pages">服务内容</label>
            <input type="text" id="pages" v-model="device.serviceContent" />
        </div>
        <div>
            <label for="price">收费标准</label>
            <input type="text" id="price" v-model="device.price" />
        </div>
        <div>
            <label for="binding">用户须知</label>
            <input type="text" id="binding" v-model="device.openSharingRules" />
        </div>
        <div>
            <label for="series">所在单位</label>
            <input type="text" id="series" v-model="device.danwei" />
        </div>
        <div>
            <label for="isbn">联系人</label>
            <input type="text" id="isbn" v-model="device.contact" />
        </div>
        <div>
            <label for="douban-id">联系电话</label>
            <input type="text" id="douban-id" v-model="device.phone" />
        </div>
        <div>
            <label for="xiamenId">xiamenId</label>
            <input type="text" id="xiamenId" v-model="device.xiamenId" />
        </div>
       
       <div class="intro">
            <label for="intro">技术指标</label>
            <textarea type="text" id="intro" rows="10" v-model="device.technicalSpecs"></textarea>
        </div>
        <div>
            <button @click="$emit('device-save')">提交</button>
        </div>
    </div>
</template>

<style scoped>
.device-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
 
.device-form > div {
  flex: 1 1 30%;
  margin: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
 
.device-form > div.intro {
  min-width: 100%;
}
 
.device-form button{
    margin-left: 80px;
    width: 20%;
}
 
label {
  display: inline-block;
  width: 80px;
}
 
textarea,
input {
  flex: auto;
  box-sizing: border-box;
}
</style>